$(document).ready(function() {

	var osp = '1';
	//atualiza o nome para manter a internacionalizacao do codigo
	$("#barraca1").text(Android.getTransString("setor_1"));
	$("#barraca2").text(Android.getTransString("setor_2"));
	$("#barraca3").text(Android.getTransString("setor_3"));
	$("#barraca4").text(Android.getTransString("biergarten"));
	$("#barraca5").text(Android.getTransString("emporio"));
	$("#barraca6").text(Android.getTransString("parque_portao_1"));
	$("#barraca7").text(Android.getTransString("portao_2"));
	$("#barraca8").text(Android.getTransString("portao_3"));
	$("#pontos").text(Android.getTransString("pontos_interesse"));
	
	//verifica qual imagem será exibida
	if(Android.getDpi() <= 1.0){
		$("#imagem_mapa").attr("src","file:///android_asset/mapa_compacto.jpg");
		$("body").css("font-size", "16px");
		osp = '0.48';
	}
	else{
		$("#imagem_mapa").attr("src","file:///android_asset/mapa.jpg");
	}
	
	
  $("#links a").click(function(event) {
		event.preventDefault();
		
    var $anchor = $(this);
    var x,y;
    var rectY, rectX;
    var winW, winH;
    
    //get the window dimensions
    winH = $(window).height();
    winW = $(window).width();
    
    //check the point to be marked
    switch($anchor.attr('class')){
    case 'loja1': //setor 1
      x = 620;
      y = 360;
      break;
    case 'loja2': //setor 2
      x = 1180;
      y = 300;
      break;
    case 'loja3': //setor 3
      x = 1550;
      y = 330;
      break;
    case 'loja4': // biergarden
      x = 200;
      y = 800;
      break;
    case 'loja5': //emporio
  		x = 1180;
      y = 600;
      break;
    case 'loja6': //parque portao 1
      x = 280;
      y = 360;
      break;
    case 'loja7': // portao 2
      x = 520;
      y = 970;
      break;
    case 'loja8': // portao 3
      x = 1640;
      y = 960;
      break;
    default:
    	x = 0;
    	y = 0;
    	break;
    }
    
    //add a offset in the y
    y = y + 110;
    

    x = Math.round(x*parseFloat(osp));
    y = Math.round(y*parseFloat(osp));

    //remove marker rect before everything
    $('#marker').remove();
    
    //include the rect to show the place
		$('#mapa').append('<div id="marker"></div>');
		$('#marker').width(Math.round($('#marker').width()*parseFloat(osp)));
		$('#marker').height(Math.round($('#marker').height()*parseFloat(osp)));
		
		//get the dimensions
		rectX = $('#marker').width();
		rectY = $('#marker').height();
		
		//test to see if the position is out of the screen
		if(( x = x-Math.round((rectX/2))) <= 0){
			x = 0;
		}
		if((y = y-Math.round((rectY/2))) <= 0){
			y = 0;
		}
		
		//set the postion
		$('#marker').css('top',y);
		$('#marker').css('left',x);
		
    //move the screen to the desired position
    $('#mapa').stop().animate({
                        scrollLeft: x
                    }, 700).animate({
								        scrollTop: y
								    }, 1200);

		$('#marker').animate({
			opacity: 1,
			height: Math.round((rectY/2))+'px',
			width: Math.round((rectX/2))+'px',
			top: Math.round(y+(rectY/4))+'px',
			left: Math.round(x+(rectX/4))+'px',
		},500);
		/*
		function setAnim(){
			$(this).animate({opacity:.2},200).
		          animate({opacity:1},150,setAnim)
		}	*/

    event.preventDefault();

  });
});